<template>
  <div @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="mouseUpEvent">
    <canvas :id="id" width="600" height="400"></canvas>
  </div>
</template>

<script>
import {nonNegativeData } from "./FixedData";
import {initPencil, drawPencil} from "./tools/DrawPencil";
import InitData from "./initData";

export default {
  data() {
    return {
      id: ZY.rid(),
      canvas: null,
      canvasContext: null,
      clickFlag: false,
      data: new InitData
    }
  },
  mounted() {
    this.canvas = document.getElementById(this.id);
    // console.log(this.canvas)
    this.canvasContext = this.canvas.getContext('2d')
  },
  methods: {
    onMouseDown(event) {
      this.clickFlag = true;
      this.data.setDragging(true);
      const mouseX = nonNegativeData(event.offsetX);
      const mouseY = nonNegativeData(event.offsetY);
      initPencil(this.canvasContext, mouseX, mouseY);
    },
    onMouseMove(event) {

      this.clickFlag = false;
      const currentX = nonNegativeData(event.offsetX);
      const currentY = nonNegativeData(event.offsetY);

      if (this.data.getDragging()) {
        drawPencil(
            this.canvasContext,
            currentX,
            currentY,
            this.data.getPenSize(),
            this.data.getSelectedColor()
        );
      }
    },
    mouseUpEvent(event) {
      this.data.setDragging(false);
    }
  }
}
</script>
